<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
<!--  引入echarts、DOM容器、初始化对象、设置配置项与数据、设置配置项至图表-->
  <script src="js/echarts.js"></script>
  <style>
    .box{
      width:800px;
      height: 800px;
      background: #12ecec;
    }
  </style>
</head>
<body>
<div class="box"></div>
<h1>折线图：分析数据使用（公司常用图表形态）时间变化趋势，分析下一步做法</h1>
<script>
  var myEcharts=echarts.init(document.getElementsByClassName("box")[0])
  var xDataArr=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  var yDataArr=[1251,1364,1545,614,168,545,654,561,1155,2415,1542]
  // ①增加刘健每个开销数据
  var zDataArr=[1534,5364,1545,484,568,1545,354,3561,5155,1415,3542]
  //需求4：庞伟同学每个月开销，168左右---呈现效果
//  var yDataArr=[168,167,165,169,168,167,165,167,166,168,167]
  var option={
        //配置项：设置图表内部的数据(X轴--月份,Y轴---花钱)
      //需求3：X轴点并没有紧贴Y轴：
      //1.X轴---月份
       xAxis:{
          type:'category' //类别  ----明确类别名字
           ,data: xDataArr //数据---月份
           //希望没有间隔，紧贴边缘
           ,boundaryGap: false
       }
      //2.Y轴---花钱
       ,yAxis:{
           type:'value'  //设置value的值，不能直接设置：明确是什么图表
           ,scale: true  //缩放scale: 脱离0值比例
       }
      //需求5：我想展示2位同学开销，怎么办？   思路：数据增加，series对象就是数组
      ,series:[{
        name:"庞伟同学12个月开销"  //图表名字----后台传输数据
        ,type:"line"              //"line"表示   折线图  字符串形式
        ,data:yDataArr
          //需求：庞伟同学，最大开销是多少，最小开销是多少，平均开销是多少（图表标注）
        ,markPoint:{   //标注数据
            data:[  //获取图表数值最大以及最小
                {type:"max"
                ,name:"最大值"}
                ,{type:"min"
                 ,name:"最小值"
                 }
                 ]
          }
        ,markLine:{
            data:[
                {
                    type:"average"  //类型 计算图表数据的平均值
                    ,name:"平均值"
                   //html输入框语法： <input type="password" name="">
                }
            ]   //data ---数据---数组---数据有多个
          }
        ,markArea:{  // markArea图表上以区间块形式表示
            //需求：庞伟童鞋  2到5月、6到7月份、9到11月份的开销数据
           data:[
               [
                   {
                       xAxis: "2月"
                   },
                   {
                      xAxis: "5月"
                   }
               ],[
                   {
                       xAxis: "6月"
                   },
                   {
                      xAxis: "7月"
                   }
               ],[
                   {
                       xAxis: "9月"
                   },
                   {
                      xAxis: "11月"
                   }
               ]
               ]  //练习：三个标注配置  节点  4分钟（练习+休息10分钟） 9:05继续
          }
        ,smooth:true   //smooth设置为true：线条平滑效果
          // 设置线条风格：颜色、类型
         ,lineStyle:{
             color: "#e4393c"   //颜色 #e4393c---十六进制---京东红
             ,type: "dashed"    //类型:3种 默认solid dotted dashed
           }
           //需求：3  优化图表展示效果---背景填充---看局部数据效果
          ,areaStyle:{
            color: "#ff0"
          }
          ,stack: "all"   //堆叠图---堆叠线分开显示
      }
          ,{
           name:"刘健同学12个月开销"
           ,type:"line"
           ,data: zDataArr
           ,stack: "all"   //堆叠图---堆叠线分开显示
          }
      ]



  }
  myEcharts.setOption(option)
</script>
</body>
</html>